<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>{{ name }} - 预约登记管理后台</h1>
      <p>欢迎使用{{ name }}，这是一个方便游客进行预约登记管理的平台。</p>
    </div>

    <!-- 简介部分 -->
    <div class="dashboard-intro">
      <p>本平台旨在为游客提供方便、快捷的预约服务。通过本系统，游客可以轻松预约景区门票，并实时查看预约状态。</p>
    </div>

    <!-- 数据可视化部分 -->
    <div class="dashboard-charts">
      <!-- 折线图 -->
      <div id="lineChart" class="chart-container" />
      <!-- 柱状图 -->
      <div id="barChart" class="chart-container" />
      <!-- 饼图 -->
      <div id="pieChart" class="chart-container" />
      <!-- 雷达图 -->
      <div id="radarChart" class="chart-container" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name' // 获取平台名称
    ])
  },
  mounted() {
    this.initLineChart()
    this.initBarChart()
    this.initPieChart()
    this.initRadarChart()
  },
  methods: {
    // 初始化折线图
    initLineChart() {
      var chartDom = document.getElementById('lineChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { text: '预约数据统计 - 折线图' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: { type: 'value' },
        series: [{ data: [820, 932, 901, 934, 1290, 1330], type: 'line' }]
      }
      myChart.setOption(option)
    },
    // 初始化柱状图
    initBarChart() {
      var chartDom = document.getElementById('barChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { text: '预约数据统计 - 柱状图' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: { type: 'value' },
        series: [{ data: [520, 732, 701, 834, 990, 1030], type: 'bar' }]
      }
      myChart.setOption(option)
    },
    // 初始化饼图
    initPieChart() {
      var chartDom = document.getElementById('pieChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { text: '预约来源统计 - 饼图' },
        tooltip: { trigger: 'item' },
        series: [
          {
            name: '预约来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '官网' },
              { value: 735, name: '小程序' },
              { value: 580, name: 'App' },
              { value: 484, name: '线下' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    // 初始化雷达图
    initRadarChart() {
      var chartDom = document.getElementById('radarChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { text: '预约情况 - 雷达图' },
        tooltip: {},
        radar: {
          indicator: [
            { name: '游客数量', max: 1000 },
            { name: '预约成功率', max: 100 },
            { name: '在线支付比例', max: 100 },
            { name: '客户满意度', max: 100 },
            { name: '重复预约率', max: 100 }
          ]
        },
        series: [
          {
            name: '预约数据',
            type: 'radar',
            data: [
              {
                value: [850, 90, 75, 80, 70],
                name: '本月统计'
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-header {
    text-align: center;
    margin-bottom: 20px;

    h1 {
      font-size: 32px;
      font-weight: bold;
    }

    p {
      font-size: 18px;
      color: #666;
    }
  }
  &-intro {
    margin-bottom: 40px;
    p {
      font-size: 16px;
      line-height: 24px;
      color: #333;
    }
  }
  &-charts {
    .chart-container {
      width: 100%;
      height: 400px;
      margin-bottom: 40px;
    }
  }
}
</style>
